

import React, { useEffect, useState } from 'react'
import { Calendar, Select, Radio, Col, Row, Typography } from 'antd';
import locale from 'antd/lib/calendar/locale/zh_CN.js'
import "./index.scss"
import { ajax } from '../../api';

export default function Time() {
    const getdate = async () => {
        let { code, result }: any = await ajax.gettimelist()
        if (code == 200) {
            document.querySelectorAll("td").forEach(v => {
                var date = v.getAttribute("title")
                result.forEach((item: any) => {
                    if (date === item.date) {
                        console.log(item.date)
                        console.log(date)
                        v.firstElementChild?.firstElementChild?.classList.add("active-date")
                    }
                })
            })
        }
    }
    const onPanelChange = () => {
        document.querySelectorAll("td").forEach(v => {
            v.firstElementChild?.firstElementChild?.classList.remove("active-date")
        })
        getdate()
    }
    useEffect(() => {
        getdate()
    }, [])
    return (
        <div style={{ background: '#fff', padding: '20px 30px' }}>
            <div className="site-calendar-customize-header-wrapper">
                <Calendar
                    locale={locale}
                    fullscreen={false}
                    headerRender={({ value, type, onChange, onTypeChange }) => {
                        const start = 0;
                        const end = 12;
                        const monthOptions = [];

                        const current = value.clone();
                        const localeData = value.localeData();
                        const months = [];
                        for (let i = 0; i < 12; i++) {
                            current.month(i);
                            months.push(localeData.monthsShort(current));
                        }

                        for (let index = start; index < end; index++) {
                            monthOptions.push(
                                <Select.Option value={`${index}`} className="month-item" key={`${index}`}>
                                    {months[index]}
                                </Select.Option>,
                            );
                        }
                        const month = value.month();

                        const year = value.year();
                        const options = [];
                        for (let i = year - 10; i < year + 10; i += 1) {
                            options.push(
                                <Select.Option key={i} value={i} className="year-item">
                                    {i}
                                </Select.Option>,
                            );
                        }
                        return (
                            <div style={{ padding: 8 }}>
                                <Typography.Title level={2}>考勤</Typography.Title>
                                <Row gutter={8}>
                                    <Col>
                                        <Radio.Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
                                            <Radio.Button value="month">月份</Radio.Button>
                                            <Radio.Button value="year">年份</Radio.Button>
                                        </Radio.Group>
                                    </Col>
                                    <Col>
                                        <Select
                                            size="small"
                                            dropdownMatchSelectWidth={false}
                                            className="my-year-select"
                                            onChange={(newYear: any) => {
                                                const now = value.clone().year(newYear);
                                                onChange(now);
                                            }}
                                            value={String(year)}
                                        >
                                            {options}
                                        </Select>
                                    </Col>
                                    <Col>
                                        <Select
                                            size="small"
                                            dropdownMatchSelectWidth={false}
                                            value={String(month)}
                                            onChange={selectedMonth => {
                                                const newValue = value.clone();
                                                newValue.month(parseInt(selectedMonth, 10));
                                                onChange(newValue);
                                            }}
                                        >
                                            {monthOptions}
                                        </Select>
                                    </Col>
                                </Row>
                            </div>
                        );
                    }}
                    onPanelChange={onPanelChange}
                />
            </div>
        </div>
    )
}
